<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import { reportActions } from "$lib/store";
  import type { DailyReport } from "$lib/types";
  import { Copy, Check } from "lucide-svelte";

  interface Props {
    report: DailyReport;
  }

  let { report }: Props = $props();
  let copied = $state(false);

  async function handleCopy() {
    const success = await reportActions.copyReport(report);
    if (success) {
      copied = true;
      setTimeout(() => {
        copied = false;
      }, 2000);
    }
  }

  function formatDate(dateStr: string) {
    const date = new Date(dateStr);
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const weekday = weekdays[date.getDay()];
    return `${dateStr} ${weekday}`;
  }
</script>

<div class="bg-notion-bg border border-notion-border rounded-notion-lg shadow-notion-lg p-8 font-notion">
  <!-- 标题区域 -->
  <div class="text-center mb-8">
    <h1 class="text-2xl font-bold text-notion-text">{report.date} 工作日报</h1>
  </div>

  <!-- 内容区域 -->
  <div class="space-y-8">
    <!-- 今日工作汇报 -->
    <section>
      <h2 class="text-lg font-semibold text-notion-text mb-4">一、今日工作汇报</h2>
      <div class="text-notion-text leading-relaxed whitespace-pre-wrap pl-4">
        {report.todayWork || '暂无内容'}
      </div>
    </section>

    <!-- 明日工作计划 -->
    {#if report.tomorrowPlan}
      <section>
        <h2 class="text-lg font-semibold text-notion-text mb-4">二、明日工作计划</h2>
        <div class="text-notion-text leading-relaxed whitespace-pre-wrap pl-4">
          {report.tomorrowPlan}
        </div>
      </section>
    {/if}

    <!-- 下周工作计划 -->
    {#if report.weekPlan}
      <section>
        <h2 class="text-lg font-semibold text-notion-text mb-4">三、下周工作计划</h2>
        <div class="text-notion-text leading-relaxed whitespace-pre-wrap pl-4">
          {report.weekPlan}
        </div>
      </section>
    {/if}
  </div>

  <!-- 操作按钮 -->
  <div class="flex justify-center mt-8 pt-6 border-t border-notion-border-light">
    <Button 
      onclick={handleCopy}
      class="bg-notion-accent hover:bg-notion-accent/90 text-white px-6 py-2 rounded-notion shadow-notion transition-all duration-200 hover:shadow-notion-hover flex items-center gap-2"
    >
      {#if copied}
        <Check class="w-4 h-4" />
        已复制
      {:else}
        <Copy class="w-4 h-4" />
        复制到剪切板
      {/if}
    </Button>
  </div>

  <!-- 底部信息 -->
  <div class="mt-6 pt-4 border-t border-notion-border-light text-center text-sm text-notion-text-lighter">
    <p>创建时间：{new Date(report.createdAt).toLocaleString('zh-CN')}</p>
    {#if report.updatedAt !== report.createdAt}
      <p class="mt-1">最后更新：{new Date(report.updatedAt).toLocaleString('zh-CN')}</p>
    {/if}
  </div>
</div>
